<template>
    <div id="login">
        <div class="login_img"><img src="../../assets/img/login.jpg" alt=""></div>
        <div id="login_box">
                <el-form ref="loginFormRef" :model="loginForm" :rules="rules" label-width="55px">
                    <el-form-item label="用户" prop='name'>
                        <el-input placeholder="请输入用户名" suffix-icon="iconfont icon-user1"
                        v-model="loginForm.name" ></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="passWord">
                        <el-input placeholder="请输入密码" suffix-icon="iconfont icon-password"
                                  show-password v-model="loginForm.passWord"></el-input>
                    </el-form-item>
                    <div class="btn_style">
                        <el-button type="primary" @click="login">登录</el-button>
                        <el-button type="success" @click="resetLoginForm">重置</el-button>
                    </div>
            </el-form>
        </div>
    </div>
</template>

<script>
    import {getLoginData} from "../../network/login";

    export default {
        name: "Login",
        data(){
            return{
                loginForm: {
                    name:'admin',
                    passWord:'123456'
                },
                //表单验证规则
                rules: {
                        name: [
                            {required: true, message: '请输入用户名', trigger: 'blur'},
                            {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
                        ],
                        passWord: [
                            {required: true, message: '请输入密码', trigger: 'change'},
                            {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
                        ],
                }
            }
        },
        methods:{
            //重置表单输入信息resetFields()
            resetLoginForm(){
                this.$refs.loginFormRef.resetFields()
            },
            //登录验证
            login(){
                this.$refs.loginFormRef.validate(() => {
                    // console.log(validate)
                    getLoginData(this.loginForm).then(res => {
                            if(res.data.meta.status !==200){
                                this.$message.error(res.data.meta.msg);
                                console.log(res.data.meta)
                            }else {
                                this.$message.success(res.data.meta.msg);
                                //记录token值
                                sessionStorage.setItem('token',res.data.data.token);
                                this.$router.replace('/home')
                            }
                    },() => {this.$message.warning('与服务器链接断开!,请连接服务器！')} )
                })
            }
        },
        created() {
            this.$message.warning('亲！这边建议你在PC端浏览更加流畅哦！')
        }
    }
</script>

<style lang="less" scoped>
    #login{
        background-color: #487eb0;
        height: 100vh;
        display: flex;
        justify-content: center;
        position: relative;
    }
    .login_img{
        border-radius: 50%;
        position: absolute;
        top: 18rem;
    }
    .login_img img{
        border-radius: 50%;
        width: 8rem;
        height: 8rem;
    }
    #login_box{
        margin-top: 22rem;
        background-color: #f1f2f6;
        width: 32rem;
        height: 30rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 5px;
    }
    .btn_style{
        display: flex;
        justify-content: center;
        margin-top: 3rem;
    }
    @media screen and (min-width: 1200px) {
        .login_img{
            top: 6rem;
        }
        .login_img img{
            width: 6rem;
            height: 6rem;
        }
        #login_box{
            width: 30rem;
            height: 20rem;
            margin-top: 10rem;
        }
    }
</style>